<template>
  <div class="pageTwo content">
    <h1>组装拉线数据展示平台</h1>
    <span class="time-view">{{ nowDate }}</span>
    <div class="hiddenBox">
      <!-- <el-popover
        popper-class="popoverStyle"
        placement="right"
        width="320"
        title=""
        trigger="manual"
        v-model="visible"
      > -->
      <el-form ref="loginForm" :model="loginForm">
        <el-form-item prop="workshopId">
          <span style="font-size: 18px; font-weight: 700">课别：</span>
          <el-select
            v-model="loginForm.workshopId"
            placeholder="请选择课别"
            @change="workshopChange"
          >
            <el-option
              v-for="item in workshopList"
              :key="item.workshopId"
              :label="'[' + item.workshopCode + ']' + ' ' + item.workshopName"
              :value="item.workshopId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="productionId">
          <span style="font-size: 18px; font-weight: 700">产线：</span>
          <el-select
            v-model="loginForm.productionId"
            placeholder="请选择产线"
            @change="lineChange"
          >
            <el-option
              v-for="item in productionList"
              :key="item.productionId"
              :label="
                '[' + item.productionCode + ']' + ' ' + item.productionName
              "
              :value="item.productionId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- <i
          class="el-icon-s-unfold"
          slot="reference"
          @click="visible = !visible"
          style="font-size: 2.2rem !important"
        ></i>
      </el-popover> -->
    </div>
    <div class="box" @click="visible = false">
      <!-- <dv-border-box-9> -->
      <div class="contenText">
        <div class="col-1">
          <span>工单号：</span>
          <span>{{ dataList.workOrderCode }}</span>
        </div>
        <div class="col-1">
          <span>料号：</span>
          <span>{{ dataList.workOrderMaterialNo }}</span>
        </div>
        <div class="col-1">
          <span>排产数量：</span>
          <span>{{ dataList.workOrderNum }}</span>
        </div>
        <div class="col-1">
          <span>当前生产数量：</span>
          <span>{{ dataList.workOrderCompleteNum }}</span>
        </div>
        <div class="col-1">
          <span>达成率：</span>
          <span>{{ dataList.doneMum }}</span>
        </div>
        <div class="col-1">
          <span>责任人：</span>
          <span>{{ dataList.workDirector }}</span>
        </div>
      </div>
      <!-- </dv-border-box-9> -->
      <table border="1">
        <thead>
          <td class="head">数量\时间</td>
          <td v-for="(item, index) in dataX" :key="index">{{ item }}</td>
        </thead>
        <tbody>
          <tr>
            <td class="head">产出</td>
            <td v-for="(item, index) in dataY" :key="index">{{ item }}</td>
          </tr>
        </tbody>
      </table>
      <dv-border-box-13>
        <barView :dataX="dataX" :dataY="dataY"></barView>
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import barView from "./components/workShop2/barView.vue";
import { getDatails, selectWorkShop, selectLine } from "@/api/workShop2";
export default {
  name: "workShop2",
  components: { barView },
  // 添加其他选项
  data() {
    return {
      nowDate: "",
      dataList: {
        workDirector: "暂无数据",
        workOrderMaterialNo: "暂无数据",
        workOrderCode: "暂无数据",
        workOrderNum: "暂无数据",
        workOrderCompleteNum: "暂无数据",
        workName: "暂无数据",
        doneMum: "暂无数据",
        successNum: "暂无数据",
      },
      dataY: [],
      dataX: [],
      visible: false,
      loginForm: {
        productionId: "",
        workshopId: "",
        processId: "",
      },
      workshopList: [],
      productionList: [],
      ProcessList: [],
      timer: null,
    };
  },
  created() {
    this.updateTime();
    this.getWorkShop();
  },
  watch: {},
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    //时间走动
    updateTime() {
      const today = new Date();
      let y = today.getFullYear();
      let mt = today.getMonth() + 1; // 月份是从0开始的
      let d = today.getDate();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      mt = mt < 10 ? "0" + mt : mt;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      const timeString =
        y + "年" + mt + "月" + d + "日" + h + ":" + m + ":" + s;
      // 显示时间到页面上的元素
      this.nowDate = timeString;
      // 每秒更新时间
      setTimeout(this.updateTime, 1000);
    },
    //车间
    getWorkShop() {
      selectWorkShop()
        .then((res) => {
          this.workshopList = res.rows;
        })
        .catch((error) => {});
    },
    //获取产线
    workshopChange(value) {
      selectLine(value)
        .then((res) => {
          this.productionList = res.rows;
        })
        .catch((error) => {});
    },
    //获取工位id
    lineChange(value) {
      this.productionList.forEach((item) => {
        if (item.productionId === value) {
          //获取信息
          this.getData(value);
          sessionStorage.setItem("workName", item.productionName);
          sessionStorage.setItem("productionId", value);
        }
      });
    },

    //获取数据
    getData(value) {
      this.dataX = [];
      this.dataY = [];
      getDatails(value).then((res) => {
        this.dataList = res.data;
        let data = res.data.list;
        data.forEach((item) => {
          let parts = item.date.split("-");
          let str = parts.map((part) => part.slice(0, -3));
          let strs = str.join("-");
          this.dataX.push(strs);
          this.dataY.push(item.num);
        });

        this.visible = false;
        this.dataList.workName = sessionStorage.getItem("workName");
        let count = parseFloat(
          (
            ((this.dataList.workOrderCompleteNum * 1) /
              (this.dataList.workOrderNum * 1 +
                this.dataList.workOrderScrapNum * 1)) *
              100 || 0.0
          ).toFixed(2)
        );
        isNaN(count)
          ? (this.dataList.doneMum = "暂无数据")
          : (this.dataList.doneMum = count + "%");
      });
      this.timer = setTimeout(() => {
        this.getData(sessionStorage.getItem("productionId"));
      }, 60000);
    },
  },
};
</script>

<style scoped>
.pageTwo {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/img/back1.png") no-repeat center center fixed;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 999;
}

html,
body {
  margin: 0;
  padding: 0;
}
/* @media screen and (min-width: 1920px) {
  html {
    font-size: 22px;
  }
} */
@media screen and (min-width: 3840px) {
  .content {
    font-size: 40px;
  }
}
h1 {
  position: absolute;
  color: #9be5fb;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
  /* margin-top: 1%; */
  letter-spacing: 5px;
  margin-left: 40%;
}
.contenText {
  /* position: absolute; */
  margin-left: 1.6%;
  margin-top: 2%;
  width: 96%;
  height: 10%;
  display: flex;
  justify-content: space-around;
}
.dv-border-box-13 {
  margin-top: 2%;
  margin-left: 4%;
  width: 91%;
  height: 60%;
  padding: 20px;
}

.col-1 {
  /* color: #4a6bd6; */
  color: rgb(122, 182, 206);
  width: 100%;
  font-size: 1.4rem;
  line-height: 4rem;
  font-weight: 700;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}
.col-1 span:nth-child(2) {
  font-size: 1.2rem;
  /* color: rgb(122, 182, 206); */
  /* color: #38c986; */
  font-weight: normal;
}
.time-view {
  /* color: #4a6bd6; */
  color: rgb(122, 182, 206);
  font-size: 1.4rem;
  margin-right: 3%;
  margin-top: 2%;
  float: right;
}
.hiddenBox {
  position: absolute;
  left: 2%;
  top: 3%;
  span {
    /* color: #4a6bd6; */
    color: rgb(122, 182, 206);
    font-size: 20px;
  }
}
.box {
  width: 100%;
  height: 98vh;
  padding-top: 5%;
}
table {
  margin-left: 4.5%;
  width: 90%;
  height: 18%;
  border-radius: 10px;
  /* color: #4a6bd6; */
  color: rgb(122, 182, 206);
  font-size: 20px;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
  thead td {
    font-size: 20px;
    font-weight: 700;
  }
  tr td {
    font-size: 20px;
    /* color: rgb(122, 182, 206); */
    color: #38c986;
  }
  td {
    width: 130px;
    height: 80px;
    border: 1px solid #3a4f91;
  }
  .head {
    width: 80px;
    font-size: 18px;
    font-weight: 700;
    /* color: #4a6bd6; */
    color: rgb(122, 182, 206);
  }
}

.el-form-item {
  margin-top: -5px;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #8993f2;
  /* height: 25px !important; */
  font-size: 18px !important;
}
/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;
  .el-input {
    input {
      font-size: 14px !important;
      height: 30px !important;
      border-color: rgba(44, 137, 229, 0.5);
      color: #8993f2 !important;
    }
  }
}
/**修改下拉图标颜色 */
::v-deep .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-arrow-up:before {
      color: #8993f2;
    }
  }
}
</style>
